<template>
  <!-- 收费信息 -->
  <div class="content-box">
    <div class="title">
      <div class="col-xs-6">退费信息</div>
      <div class="col-xs-6" style="text-align: right">
        <i class="glyphicon glyphicon-pencil" style="cursor: pointer"></i>
      </div>
    </div>

    <el-form ref="form" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="退费总额："> ￥{{ countMoney }} </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="退费方式：">
            <el-select v-model="form.payWay" style="width: 200px" @change="findJaBalancelogAll" placeholder="请选择退费类型">
              <el-option value key>全部</el-option>
              <el-option v-for="(value, key) in rechargeArr" :label="value" :value="key" :key="key"></el-option>
            </el-select>
            <!-- <el-button @click="exportExcel" class="btn-export">导出</el-button> -->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- <table border="0" class="basic_table" width="100%">
        <tr height="40">
          <td>收费总额：</td>
          <td>￥{{countMoney}}</td>
          <td>剩余挂账：</td>
          <td>￥{{detail.medicalCardCode}}</td>
        </tr>
      </table> -->
    <table class="table-box">
      <thead>
        <tr>
          <th>退费名称</th>
          <th>退费科室</th>
          <th>退费时间</th>
          <th>收费状态</th>
          <th>就诊时间</th>
          <th>实退金额</th>
          <th>操作人</th>
          <th>备注</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableList" :key="index">
          <td>{{ item.sourceName }}</td>
          <td>{{ item.deptName }}</td>
          <td>{{ item.refundTime }}</td>
          <td>已退费</td>
          <td>{{ item.seeTime }}</td>
          <td>￥{{ item.refundAmount }}元</td>
          <td>{{ item.memberName }}</td>
          <td>{{ item.remark }}</td>
          <!-- <td>
            <el-link @click="getDetail(item)" :underline="false">查看详情</el-link>
          </td> -->
        </tr>
      </tbody>
    </table>
    <div v-if="tableList.length == 0" style="color: #999; padding: 10px 0; text-align: center">
      <i class="iconfont iconwushuju" style="font-size: 40px"></i>
      <div>暂无数据</div>
    </div>
    <br />
    <pager v-model="pager" @change-pagenum="findJaBalancelogAll"></pager>
  </div>
</template>
<script>
import enumArr from "../../_enum/enum";
import Excel from "@/_js/excel.js";
export default {
  props: ["detail"],
  data() {
    return {
      tableList: [],
      pager: { pageSize: 20, pageNum: 1, total: 0 },
      form: { hpId: "", patientId: "", payWay: "" },
      countMoney: 0,
      rechargeArr: enumArr.payArr,
    };
  },
  mounted() {
    this.getTotalAmount();
    this.findJaBalancelogAll();
  },
  methods: {
    findJaBalancelogAll(type) {
      let th = this;
      if (type == -1) {
        th.pager.pageNum = 1;
        th.pager.total = 0;
      }
      th.form.patientId = th.detail.patientId;
      // th.form.hpId = th.adminUser.hpId;
      let json = Object.assign(th.pager, th.form);
      th.$api
        .getHaveRefundList(json)
        .then((res) => {
          if (res.executed) {
            th.tableList = res.dataBody.list || [];
            th.pager.total = res.dataBody.total;
          } else {
            th.tableList = [];
            th.pager.total = 0;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getTotalAmount() {
      this.$api
        .getRefundTotalAmount({ patientId: this.detail.patientId })
        .then((res) => {
          if (res.executed) {
            this.countMoney = res.dataBody.totalAmount;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getDetail(obj) {
      let j = {
        id: obj.orderId,
        patientId: this.detail.patientId,
      };

      // {id:th.$route.query.id,orderId:th.$route.query.orderId,patientId:th.$route.query.patientId}
      this.addNavMenu("已退费详情", "/page/hasRefundDetail?" + this.$utils.JsonToUrl(this.getUrlToken(j)), "hasRefundDetail");
      this.$router.push({
        path: "/page/hasRefundDetail",
        query: this.getUrlToken(j),
      });
    },
    exportExcel() {
      let th = this;
      let data = [];
      let json = Object.assign({ pageNum: 1, pageSize: 1000 }, th.form);
      th.$api.getOrderRecordList(json).then((res) => {
        if (res.executed) {
          data = res.dataBody.pageInfo.list;
          let list = [
            { key: "createTime", name: "消费时间" },
            { key: "totalAmount", name: "应收金额" },
            { key: "actualAmount", name: "消费金额" },
          ];
          Excel(data, list, "消费记录");
        }
      });
    },
  },
  filters: {
    changeReocrd: function (value) {
      let str = "";
      if (value != "") {
        switch (value) {
          case 0:
            str = "待付款";
            break;
          case 2:
            str = "已收费";
            break;
          case 4:
            str = "已退款";
            break;
          case 5:
            str = "已取消";
            break;
          default:
            str = "";
            break;
        }
      }
      return str;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../_css/detail.scss";
.content-box {
  border: none;
}
.visit_detail_box .content-box .title {
  padding-left: 0;
  background: none;
}
.visit_detail_box .content-box table {
  border: none;
}
.btn-export {
  float: right;
}
</style>

